<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 系统介绍部分，左侧 -->
      <div class="intro-box">
        <div class="welcome-text">欢迎登录药店管理系统</div>
        <p class="system-intro">基于推荐算法的药店管理系统</p>
        <div class="features-container">
          <div class="feature-card">
            <i class="fa fa-chart-line"></i>
            <div class="feature-title"><el-icon :size="40" class="icon"><TrendCharts /></el-icon>销售管理</div>
            <p>清晰的图表掌握销售动向</p>
          </div>
          <div class="feature-card">
            <i class="fa fa-cogs"></i>
            <div class="feature-title"><el-icon :size="40" class="icon"><Box/></el-icon>库存管理</div>
            <p>利用推荐算法提供智能库存推荐</p>
          </div>
          <div class="feature-card">
            <i class="fa fa-box"></i>
            <div class="feature-title"><el-icon :size="40" class="icon"><Management/></el-icon>药品匹配</div>
            <p>推荐算法匹配更符合客户症状的药品</p>
          </div>
          <div class="feature-card">
            <i class="fa fa-users"></i>
            <div class="feature-title"><el-icon :size="40" class="icon"><User/></el-icon>员工管理</div>
            <p>提供高效的员工信息管理功能</p>
          </div>
        </div>
      </div>

      <!-- 登录表单部分，右侧 -->
      <div class="form-box">
        <div class="form-header">
          <h2>请输入账号信息</h2>
        </div>
        <el-form ref="formRef" :model="data.form" :rules="data.rules">
          <el-form-item prop="username">
            <el-input v-model="data.form.username" :prefix-icon="User" placeholder="请输入账号" size="large"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="data.form.password" :prefix-icon="Lock" placeholder="请输入密码" show-password
                      size="large"/>
          </el-form-item>
          <el-form-item>
            <el-button size="large" style="width: 100%" type="primary" @click="login">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import {Lock, TrendCharts, User} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import router from "@/router";
import { loginApi } from "@/utils/API/common";
import { expiration } from "@/utils/LocalStroageUtil";

const data = reactive({
  form: {},
  rules: {
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
  }
})

const formRef = ref()

const login = () => {
  formRef.value.validate((valid => {
    if (valid) {
      loginApi(data.form).then(res => {
        if (res.code === '200') {
          if (res.data.role === 'ADMIN') {
            router.push('/ADMIN')
          } else {
            router.push('/SELLER')
          }
          ElMessage.success("登录成功")
          localStorage.setItem('system-user', JSON.stringify(res.data))
          localStorage.setItem('role', res.data.role)
          localStorage.setItem('expiration', Date.now())
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })).catch(error => {
    console.error(error)
  })
}
</script>

<style scoped>
/* 背景样式 */
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  background-size: cover;
  background-position: center;
}

/* 登录框容器 */
.login-box {
  width: 1000px;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  padding: 40px;
  overflow: hidden;
}

/* 系统介绍部分，左侧 */
.intro-box {
  flex: 1;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-right: 2px solid #e0e0e0;
}

.welcome-text {
  font-weight: bold;
  font-size: 36px;
  text-align: center;
  margin:0 0  20px 30px;
  color:  #1967e3;
  background: #1967e3;
  -webkit-background-clip: text;
  color: transparent;
  padding: 10px 0;
}

.system-intro {
  font-size: 24px;
  font-weight: bolder;
  color: #666;
  text-align: center;
  margin:0 0 30px 50px;
}

/* 特性容器 */
.features-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
  padding: 0 20px;
}

.feature-card {
  background-color: #f7f7f7;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.feature-card .icon {
  font-size: 40px;
  color: #1967e3;
  margin-bottom: 15px;
}

.feature-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.feature-card p {
  color: #666;
  font-size: 14px;
  margin-top: 0;
}

.feature-card i, .feature-title {
  display: inline-block;
  vertical-align: middle;
}


/* 表单部分，右侧 */
.form-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 40px;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
}

.form-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

/* 表单样式 */
.el-form-item {
  margin-bottom: 25px;
}

.el-input__inner {
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 12px 15px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.el-input__inner:focus {
  border-color: #1e90ff;
  box-shadow: 0 0 8px rgba(30, 144, 255, 0.6);
}

.el-button--primary {
  border-radius: 10px;
  background-color: #1e90ff;
  border: none;
  color: #ffffff;
  padding: 12px 20px;
  font-size: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.el-button--primary:hover,
.el-button--primary:active {
  background-color: #1678d2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.form-footer {
  text-align: right;
  margin-top: 20px;
}

.form-footer a {
  color: #1e90ff;
  text-decoration: none;
  transition: color 0.3s;
}

.form-footer a:hover {
  color: #1678d2;
  text-decoration: underline;
}

.icon {
  color: #1967e3;
}
</style>